<template>
	<view class="audit-container">
		<!-- 	这里同样直接复制不用修改 -->
		<view class="audit-form">
			<view style="font-weight: bolder; padding: 20rpx" v-if="titel">{{ titel }}</view>
			<vol-form ref="form" :form-options.sync="formOptions" :formFields.sync="formFields" :padding="19"></vol-form>
			<view v-if="pageUrl == 'q_delivery_request' || pageUrl=='q_sales_contract'|| pageUrl=='q_sales'|| pageUrl=='q_payment_receipt'|| pageUrl=='q_sales_return'|| pageUrl=='q_client'|| pageUrl=='q_purchase'|| pageUrl=='q_stock_in'|| pageUrl=='q_stock_out'|| pageUrl=='q_goods_info'|| pageUrl=='q_after_delivery'|| pageUrl=='q_after_recycle'|| pageUrl=='q_after_return'|| pageUrl=='q_aftersale'|| pageUrl=='q_serve_contract'|| pageUrl=='q_install_request_notarize'|| pageUrl=='q_aftersale_notarize'|| pageUrl=='q_operations_recycle'|| pageUrl=='q_operations_return'|| pageUrl=='q_operations_contract'|| pageUrl=='q_fittings_delivery'|| pageUrl=='q_purchase_application'">
				<view class="form_view" v-for="(item,index) in editFormOptions">
					<view>{{item.title}}</view>
					<view v-if="item.field == 'Attachment' || item.field == 'attachment'">
						<view class="urlitem" v-for="(urlitem,index) in item.url">
							<view  @click="downFile(urlitem)">{{urlitem.name}}</view>
						</view>
					</view>
					<view v-if="item.field == 'Image'" style="display: flex;" >
						<view v-for="(urlitem,index) in item.url">
							<image style="width: 60rpx;height: 60rpx;margin: 3px;" :src="urlitem.url" @click="previewImage(urlitem.url)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="audit-action">
			<!-- 6、显示审批操作（直接复制）,2022.09.26之前的代码需要更新components文件架3 -->
			<auditCom ref="audit" :data="salesContractData" :detailColumns="detailColumns"></auditCom>
		</view>
		<u-modal
			:show="downloadModalShow"
			@confirm="downloadModalConfirm"
			@cancel="
				() => {
					downloadModalShow = false;
				}
			"
			closeOnClickOverlay
			@close="
				() => {
					downloadModalShow = false;
				}
			"
			:content="downloadModalContent"
			showCancelButton
			cancelText="取消"
		></u-modal>
	</view>
</template>

<script>
export default {
	props: {
		titel: {
			require: true,
			type: String
		},
		pageUrl: {
			require: true,
			type: String
		},
		salesContractData: {
			require: true,
			type: Object
		},
		formFields: {
			require: true,
			type: Object
		},
		formOptions: {
			require: true,
			type: Array
		},
		detailColumns: {
			//明细表配置
			type: Array,
			required: true
		}
	},
	data() {
		return {
			editFormOptions:[
				{
					title: '附件',
					field: 'Attachment',
					readonly: true,
					type: 'file',
					url:[]
				},
				{
					title: '产品附件',
					field: 'attachment',
					readonly: true,
					type: 'file',
					url:[]
				},
				{
					title: '图片',
					field: 'Image',
					readonly: true,
					type:'img',
					url:[]
				}
			],
			editFormFields: {
				Image: '',
				Attachment: '',
			},
			downloadModalShow: false, //控制下载模态框
			downloadModalContent: '是否下载文件',
			fileUrl:'',
		};
	},
	methods: {
		downFile(val){
			this.fileUrl = val.url;
			this.downloadModalShow = true;
		},
		downloadModalConfirm() {
			// console.log(123);
			this.downloadModalShow = false;
			this.downloadOverlayShow = true; //遮罩层
			//确定时下载文件
			this.downloadTask = null;
			// console.log('this.fileUrl', this.fileUrl);
			// 获取域名this.$store.state.IP
			this.fileUrl = this.$store.state.IP + this.fileUrl;
			this.downloadTask = uni.downloadFile({
				//调用官方提供的uni.downloadFile
				// url: this.fileUrl+"?t="+ new Date().getTime(), //将刚刚提前准备好的url传过来
				url: this.fileUrl,
				header: {
					//如果需要填写请求头信息则在此处填写
				},
				success: (res) => {
					if (res.statusCode === 200) {
						console.log('下载成功：', res.tempFilePath);
						//下载成功，并把下载好的文件保存在临时区域中
						uni.saveFile({
							//使用该功能，以将临时文件保存在手机中可长久存储的区域
							tempFilePath: res.tempFilePath,
							success: (saveResult) => {
								// 在保存文件成功后，使用 uni.openDocument 方法打开文件
								console.log('文件保存成功:', saveResult);
								this.downloadOverlayShow = false; //遮罩层
								uni.openDocument({
									filePath: saveResult.savedFilePath,
									// fileType: fileType,  //这里把预先限定好的文件类型传来
									success: function () {
										console.log('文件打开成功!');
										//至此，手机会从app中跳转到文件预览界面
										//之后可从预览界面返回app中
									},
									fail: function (err) {
										console.log('打开失败', err);
									}
								});
								// this.saveResult = saveResult;
								// this.previewModalShow = true;
							},
							fail: function (err) {
								console.log('保存文件失败', err);
								uni.showToast({
									icon: 'error',
									title: '保存文件失败'
								});
								this.downloadOverlayShow = false; //遮罩层
							}
						});
					}
				},
				fail: (err) => {
					uni.showToast({
						icon: 'error',
						title: '下载失败'
					});
					this.downloadOverlayShow = false; //遮罩层
				}
			});
		},
		previewImage(val){
			uni.previewImage({
				urls: [val],
				current: val
			});
		}
	},
	created(options) {
		// this.salesContractData = {
		// 	workTable:options.workTable,
		// 	tableKey:options.tableKey,
		// }
		//7、配置查询条件Order_Id改为实际表的主键字段
		const obj = this.formOptions.filter((item) => item.title == 'ID');
		console.log('this.$store---', this.$store.state.salesContractDataStore);
		let wheres = [
			{
				name: obj[0].field,
				// value: this.salesContractData.tableKey
				value:this.$store.state.salesContractDataStore.tableKey
			}
		];
		let params = {
			page: 1,
			rows: 30,
			wheres: JSON.stringify(wheres)
		};
		//7、调用后台接口返回数据，将SellOrder改为当前表名
		this.http.post(`api/${this.pageUrl}/getPageData`, params, true).then((result) => {
			if (!result.rows.length) {
				this.$toast('未查到数据');
				return;
			}
			// 判断有没有图片或者文件
			if(result.rows[0].Attachment === undefined){
				this.editFormOptions.splice(0,1);
			}
			if(result.rows[0].attachment === undefined){
				this.editFormOptions.splice(1,1);
			}
			if(result.rows[0].Image === undefined){
				this.editFormOptions.splice(2,1);
			}
			this.editFormOptions.forEach((item) =>{
				item.url = [];
				// 判如果是文件处理
				if(result.rows[0].Attachment && item.field == "Attachment"){
					
					let AttachUrl = result.rows[0].Attachment.split(',');
					console.log(AttachUrl);console.log("AttachUrl")
					for(let i=0;i<AttachUrl.length;i++){
						let obj = {
							name:'',
							url:''
						}
						let fileName = AttachUrl[i].split('/');
						obj.name = fileName[4];
						obj.url = AttachUrl[i];
						item.url.push(obj)
					}
				}
				if(result.rows[0].attachment && item.field == "attachment"){
					
					let AttachUrl = result.rows[0].attachment.split(',');
					for(let i=0;i<AttachUrl.length;i++){
						let obj = {
							name:'',
							url:''
						}
						let fileName = AttachUrl[i].split('/');
						obj.name = fileName[4];
						obj.url = AttachUrl[i];
						item.url.push(obj)
					}
				}
				if(result.rows[0].Googs_image && item.field == "Image"){
					let imgUrl = result.rows[0].Googs_image.split(',');
					for(let i=0;i<imgUrl.length;i++){
						let imgName = imgUrl[i].split('/');
						let obj = {
							name:'',
							url:''
						}
						obj.name = imgName[4];
						obj.url = this.$store.state.IP + imgUrl[i];
						item.url.push(obj)
					}
				}
				if(result.rows[0].Image && item.field == "Image"){
					let imgUrl = result.rows[0].Image.split(',');
					for(let i=0;i<imgUrl.length;i++){
						let imgName = imgUrl[i].split('/');
						let obj = {
							name:'',
							url:''
						}
						obj.name = imgName[4];
						obj.url = this.$store.state.IP + imgUrl[i];
						item.url.push(obj)
					}
				}
			})
			this.$emit('masterDate', result.rows[0]);
			//获取审批信息
			this.$nextTick(() => {
				//第一个参数为当前表的主键字段的值(SellOrderOptions.js执行跳转的时候已经传进来了)
				//第二个参数当前操作的表名
				// this.$refs.audit.load(options.Sales_contract, 'q_sales_contract');
			});
		});
	}
};
</script>

<style lang="less" scoped>
.audit-container {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	background: #f9f9f9;
	padding: 20rpx;
	box-sizing: border-box;

	.audit-form,
	.audit-action {
		border-radius: 5px;
		background: #ffff;
	}
}
.form_view{
	padding: 10px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f5f5f5;
	color: #4c4c4c;
	font-size: 31rpx;
}
.urlitem{
	font-size: 10px;text-align: right;color: rgb(1, 137, 255);
}
</style>
